<template>
    <view>
        <view>
            <view class="label">MQTT</view>
            <view v-for="(device, index) in device_list" :key="index" class="device">
                <view class="name">{{ device.name }}</view>
                <view class="item">
                    标识：{{ device.identity }}
                </view>
            </view>
        </view>
        <view>
            <view class="label">CoAP</view>
            <view>
                <CoapDevice />
            </view>
        </view>
    </view>
</template>

<script>
import { ofSim } from '@/iot/api/device/device'
import { MqttChannel } from '@/iot/entity/MqttChannel'

import { Coap as CoapDevice } from '@/iot/components/device/Coap'

export default {
    components: { CoapDevice },
    data() {
        return {
            device_list: []
        }
    },
    created() {
        ofSim().then(res => {
            this.device_list = res.data.items
            this.device_list.forEach(device => {
                device.mqtt_channel = new MqttChannel(device.identity)
                device.mqtt_channel.connect()
            });
        }).catch(e => {
            console.log('error', e)
        })
    },
    onHide() {
        console.log('hide')
        this.end()
    },
    onUnload() {
        console.log('unload')
        this.end()
    },
    methods: {
        end() {
            this.device_list.forEach(device => {
                device.mqtt_channel.end()
            });
        }
    }
}
</script>

<style scoped lang="scss">

    .label {
        margin-top: 20px;
        padding-left: 10px;
        border-left: 4px #F27931 solid;
    }
.device {
    margin: 15rpx 15rpx 0rpx 15rpx;
    padding: 15rpx;
    border-radius: 15rpx;
    background-color: white;

    .name {
        font-weight: bold;
        padding: 10rpx 0rpx;
    }
}
</style>